@import '@/styles/variables.scss';

.patient-prescriptionItem-view{
  .caseContent-main {
     margin: $collection-y $collection-x;
     border-radius: 4px;

     .caseContent-title {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 40px;
       padding: 0px $collection-x;
       background: $table-top-bg;
       border: 1px solid $border-color;
       border-bottom: none;
       border-top-left-radius: $border-radius-4;
       border-top-right-radius: $border-radius-4;

       .title-left {
         span {
           font-size: $font-size-main;
           color: $font-size-main;
           font-weight: bold;
         }
       }
     }

     .caseContent-content {
       border-bottom-left-radius: $border-radius-4;
       border-bottom-right-radius: $border-radius-4;
       border: 1px solid $border-color;
       background: rgba(245,245,245,0.5);
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
       flex-direction: column;
       .content-item-ul {
         width: 100%;
         .line{
           height: 38px;
           width: 1px;
           background-color: $border-color;
           margin: 0 $block-x;
         }

         .content-item-container {
           width: 100%;
           box-sizing: border-box;
           border-bottom: 1px solid $border-color;
           display: flex;
           justify-content: flex-start;
           align-items: center;

           &:last-of-type {
             border: none;

           }

           .title-item {
             min-width: 80px;
             max-width: 120px;
             padding: $block-y $block-x;
             text-align: right;
           }

           .content-item {
             width: 100%;
             .el-input {
               width: 100%;

               .el-input__inner {
                 background: #F5FAFB;
                 border: 0px;
                 height: 40px;
               }
             }

           }
         }
       }

       .check-item{
         height: 38px;
         display: flex;
         align-items: center;
         width: 100%;

         .check-item-left{
           width: 100%;
           display: flex;
           justify-content: space-between;
           padding: 0 $block-x;
         }
         .check-item-line{
           height: 100%;
           width: 1px;
           background-color: $border-color;
           margin: 0 $block-x;
         }
         .check-item-right{
           width: 100px;
           display: flex;
           justify-content: center;
         }
       }

       .enjoin-item{
         height: 38px;
         display: flex;
         align-items: center;
         width: 100%;
         color: $font-color-info;

         .enjoin-item-left{
           width: 100px;
           display: flex;
           justify-content: center;
         }
         .enjoin-item-line{
           height: 100%;
           width: 1px;
           background-color: $border-color;
           margin: 0 $block-x;
         }
         .enjoin-item-right{
           width: 100%;
           display: flex;
           justify-content: left;
           padding: 0 $block-x;
         }
       }

       .prescription-view:first-child{
         border-top:0;
       }
       .prescription-view{
         width: 100%;
         border-top: 1px $border-color dashed;
         .prescription-title{
           height: 38px;
           display: flex;
           align-items: center;

           img{
             width: 16px;
             height: 16px;
             margin: 0 $block-x;
           }
         }
         .prescription-item{
           display: flex;
           align-items: center;
           height: 38px;
           border-top: 1px $border-color dashed;
           .prescription-item-name{
             width: 100%;
             padding: 0 $block-x;
           }
           .prescription-item-line{
             height: 100%;
             //width: 1px;
             border-left: 1px $border-color dashed;
           }
           .prescription-item-value{
             padding-left:$block-x;
             height: 100%;
             width: 100px;
             min-width: 100px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             .unit{
               display: flex;
               align-items: center;
               height: 100%;
               padding: 0 $block-x;
               background-color: $table-top-bg;
             }

             .text-line{
               height: 16px;
             }
           }
           .wide{
             width: 200px;
           }
           .gray{
             color: $font-color-info;
           }
           .infinite{
             width: 100%;
           }
         }
       }
     }
   }
}
